<script>
	import Vue from 'vue';
	// 引入vue-APlayer插件
	import APlayer from "vue-aplayer";
	// 使用APlayer
	// Vue.use(APlayer, {
	// 	defaultCover: '@/assets/images/default.jpg',
	// 	productionTip: true,
	// });
	
	export default {
		name: 'SongPage',
		data() {
			return {
				url: '',
				audio: {
					title: this.name, // 歌曲名字
					artist: '未知艺术家', // 演唱作者
					url: '', // 音频文件url
					pic: 'https://wx4.sinaimg.cn/mw690/005zGTLKgy1hseiwx0dzqj30wi14nn4p.jpg', // 演唱者封面
					lrc: '', // 歌词或歌词文件
				}
			}
		},
		components: {
			APlayer
		},
		props: ['id', 'name'],
		created() {
			this.getSong();
			this.getLyric();
		},
		methods: {
			// 获取音乐的地址
			async getSong() {
				let res = await this.$api.songUrl();
				console.log('音乐播放', res.data.data[0]);
				this.url = res.data.data[0].url;
				// 获取音乐的url
				this.audio.url = res.data.data[0].url;
				console.log(this.audio.url);
			},
			// 获取当前的歌词
			async getLyric() {
				let res = await this.$api.getLyric({id: this.id});
				console.log('歌词', res.data.lrc.lyric);
				// 获取歌词
				this.audio.lrc = res.data.lrc.lyric;
			}
		}
	}
</script>

<template>
	<div>
		{{ id }} -- {{ name }}
		<!--音频-->
		<!--<audio :src="url" controls autoplay></audio>-->
		<!--使用插件-->
		<!--:music="audio[0]" 歌曲的信息 -->
		<!--:list="audio" 歌曲的列表 -->
		<!--autoplay 自动播放-->
		<!--:showlrc="true" 是否显示歌词-->
		<APlayer :music="audio" :showlrc="true" v-if="audio.url"></APlayer>
	</div>

</template>

<style scoped lang="less">

</style>